<template>
    <div>
        <ul v-html="html" class="resultList" /> 
    </div>
</template>

<script lang="ts">

export default {
    props: ['brightText',"list"],
    data() {
        return { 
            html:"",
        }
    },
    watch:{
        brightText: {
            handler(newQuestion) {
                const regExp = new RegExp(this.$props.brightText, 'g')

                let arr = JSON.parse(JSON.stringify(this.list))
                
                arr.forEach((item: any,index:number) => {
                    arr[index] = `<li class="item">${item.replace(regExp, `<span style="background: yellow;">${this.$props.brightText}</span>`)}</li>`
                })

                this.html = arr.join("")
            },
            immediate: true
        }
    }
    
}

</script>

<style lang="scss" scoped>
    .resultList{
        padding:10px;

        // 这里的 可以设置搜索选项每一项的数据
        ::v-deep(.item){
          padding:  5px 0;
        }
    }
</style>
 